<template>
    <div class="my-sider">
        <!-- 圆盘 -->
        <div class="circle">
            <div
                    class="circle-content"
                    ref="circel_content"
            >
                <MyCircle :angle2labelname="angle2labelname" :rotate="rotate"></MyCircle>
            </div>

        </div>
        <!--  箭头 -->
        <div class="content">
            <img
                    src="../../../assets/image/sider-arrow.png"
                    alt=""
            >
        </div>
    </div>
</template>
<script>
    import MyCircle from "./circle"

    export default {
        name: "Sider",
        data() {
            return {
                currentId: 1,
                listName: [], //滚动的列表
                // 当前角度
                currentAngel: 0,
                rotate: 0,
                // angle2labelname
                angle2labelname: [
                    {
                        rotate: 0,
                        label: "数字农牧场管理",
                        path: "DigitalFarm"
                    },
                    {
                        rotate: -30,
                        label: "数字乡村管理",
                        path: "DigitalVillage"
                    },
                    {
                        rotate: -60,
                        label: "大数据归集共享",
                        path: "AgriculturalSharing"
                    },
                    {
                        rotate: -90,
                        label: "智慧党建平台",
                        path: "SmartBuilding"
                    },
                    {
                        rotate: -120,
                        label: "农村电商培育",
                        path: "RuralEcommerceCultivation"
                    },
                    {
                        rotate: -150,
                        label: "人居环境检测",
                        path: "IntelligentDetectionEnvironment"
                    },
                    {
                        rotate: -180,
                        label: "安全溯源检测",
                        path: "AgriculturalProductSafety"
                    },
                    {
                        rotate: -210,
                        label: "农业农村服务",
                        path: "DigitalAgricultureRuralService"
                    },
                    {
                        rotate: -240,
                        label: "乡村数字治理",
                        path: "RuralDigitalGovernance"
                    },
                ]

            }
        },
        components: {
            MyCircle
        },
        watch: {
            "$route": {
                handler({name}) {
                    // console.log(name)
                    let rotate = this.angle2labelname.find(ele => ele.path == name).rotate
                    this.rotate = rotate

                    this.$nextTick(_ => {
                        let controlWheel = this.$refs.circel_content
                        // console.log(controlWheel)
                        controlWheel.style.transform = `translate(-50%, -300px) rotate(${rotate - 30}deg)`

                    })
                },
                immediate: true

            }
        },
        mounted() {
            let controlWheel = this.$refs.circel_content
            let rotate = this.rotate
            controlWheel.onwheel = (e) => {

                //  判断朝上还是朝下
                let direction = e.deltaY > 0 ? 'down' : 'up'
                if (this.currentId <= 1) {
                    direction == 'down' ? this.currentId++ : this.currentId = 1
                } else if (this.currentId >= this.listName.length) {
                    direction == 'down' ? this.currentId = this.listName.length : this.currentId--
                } else {
                    direction == 'down' ? this.currentId++ : this.currentId--
                }
                if (direction == "down") {
                    if (rotate > -240) {
                        rotate -= 30
                        controlWheel.style.transform = `translate(-50%, -300px) rotate(${rotate - 30}deg)`
                    }
                } else if (direction == "up") {
                    // if (rotate <= -30) {
                    if (rotate == 0) {
                        controlWheel.style.transform = `translate(-50%, -300px) rotate(${rotate - 30}deg)`
                    } else if (rotate <= -30) {
                        rotate += 30
                        controlWheel.style.transform = `translate(-50%, -300px) rotate(${rotate - 30}deg)`
                    }
                }

                this.currentAngel = rotate
                // console.log(rotate)
                let path = this.angle2labelname.find(ele => ele.rotate == this.currentAngel).path
                // console.log("----", this.$route.name)
                // console.log(path)
                if (this.$route.name != path) {
                    // console.log(12)
                    this.$router.push({name: path})
                }

            }
        },


    }
</script>
<style scoped lang="scss">
    .my-sider {
        width: 100%;
        height: 100%;
        background: url(../../../assets/image/sider.png) no-repeat;
        position: relative;
        .content {
            position: absolute;
            left: 330px;
            top: 50%;
            transform: translateY(-50%);
        }
        .circle {
            width: 1344px;
            height: 1344px;
            position: absolute;
            overflow: hidden;
            .circle-content {
                width: 1944px;
                height: 1944px;
                border-radius: 50%;
                // border: 1px solid #ccc;
                transition: all 1s;
                // 表盘角度初始化
                transform-origin: 50% 50%;
                transform: translate(-50%, -300px) rotate(-60deg);
            }
        }
    }
</style>
